<!--
 * @Descripttion: 一级头部
 * @Author: zhanyi
 * @Date: 2021-10-21 14:27:01
 * @FilePath: \wczd-mobile\src\pages\component\top-panel\firstTopPanel.vue
-->
<template>
  <div class="firstTopPanel">
    <div class="title">{{ title }}</div>
    <div class="select">
      <div :class="clickData===item.value?'selected':'select-item'" v-for="(item,index) in selectData" :key="index" @click="selectClick(item)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'firstTopPanel',
  props: {
    title: String,
    selectData: {
      type: Array,
      default: []
    }
  },
  components: {},
  data () {
    return {
      clickData: this.selectData[0].value
    }
  },
  computed: {},
  mounted () { },
  watch: {},
  methods: {
    selectClick (item) {
      this.clickData = item.value
      this.$emit('selectCallBack', item)
    }
  },
}
</script>

<style scoped lang="scss">
.firstTopPanel {
  width: 100%;
  height: 370upx;
  background: url("@/static/wczd/login-bk.png") no-repeat;
  background-size: 100% 100%;
  .title {
    padding-top: 120upx;
    font-size: 45upx;
    font-weight: bold;
    padding-left: 40upx;
  }
  .select {
    display: flex;
    padding: 10upx;
    justify-content: space-evenly;
    margin: auto;
    width: 700upx;
    margin-top: 70upx;
    height: 80upx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6upx;
    .select-item {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      color: #75787b;
    }
    .selected {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      background: #009fdf;
      color: #fff;
    }
  }
}
</style>
